<template>
  <BasicTable @register="registerTable">
    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增类型</a-button>
      <a-button type="primary" preIcon="ant-design:copy-outlined" @click="handleExport"> 复制</a-button>
      <a-button type="primary" preIcon="ant-design:import-outlined" @click="handleImport">导入</a-button>
      <a-button type="primary" preIcon="ic:round-expand" @click="expandAll">展开全部</a-button>
      <a-button type="primary" preIcon="ic:round-compress" @click="collapseAll">折叠全部</a-button>
    </template>
  </BasicTable>
  <InputForm @register="registerForm" @success="reload" showFooter />
  <ImportType @register="registerImport" @success="reload" />
</template>
<script lang="ts" name="log-event" setup>
  import { unref, ref, onMounted } from "vue"
  import { BasicTable, BasicColumn, useTable } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import InputForm from "./Form.vue"
  import ImportType from "./Import.vue"
  import { columns, searchFormSchema } from "./data"
  import { listLogTypeTree, deleteLogType } from "./api"
  import { useMessage } from "/@/hooks/web/useMessage"
  import * as treeUtils from '/@/utils/helper/treeHelper'
  import { useCopyToClipboard } from "/@/hooks/web/useCopyToClipboard";

  const [registerImport, { openDrawer: openImport }] = useDrawer()
  const { clipboardRef, copiedRef } = useCopyToClipboard();
  const { createMessage } = useMessage()

  const [registerForm, { openDrawer: openInputForm }] = useDrawer()

  const actionColumn: BasicColumn = {
    width: 160,
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    slot: "tableActions",
    actions: (record: Recordable) => [
      {
        label: "编辑",
        onClick: handleEdit.bind(null, record),
      },
      {
        label: "删除",
        color: "error",
        popConfirm: {
          title: `是否确认删除 ${record.name}`,
          confirm: handleDelete.bind(null, record),
        },
      },
    ],
    dropDownActions: (record: Recordable) => [
      // {
      //   label: "详情",
      //   onClick: handleDetail.bind(null, record),
      // },
      {
        label: "添加子类型",
        ifShow: () => record.parentId == '0',
        onClick: handleAddSub.bind(null, record),
      },
    ],
  }

  const [registerTable, { reload, getForm, expandAll, collapseAll, expandCollapse }] = useTable({
    title: "日志事件",
    api: listLogTypeTree,
    immediate: false,
    formConfig: {
      labelWidth: 70,
      baseColProps: { lg: 8, md: 24 },
      showSubmitButton: false,
      showResetButton: false,
      schemas: searchFormSchema,
    },
    columns: columns,
    size: "small",
    pagination: false,
    isTreeTable: true,
    striped: true,
    useSearchForm: true,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: false,
    tableSetting: { fullScreen: true },
    actionColumn,
  })
  onMounted(() => {
    const { updateSchema } = getForm()
    reload()
  })


  function handleCreate() {
    openInputForm(true, {
      isUpdate: false,
    })
  }

  function handleEdit(record) {
    openInputForm(true, {
      record,
      isUpdate: true,
    })
  }

  async function handleExport() {
    clipboardRef.value = "";
    createMessage.loading({
      content: "复制中...",
      key: "loading",
      duration: 0
    });

    try {
      const data = await listLogTypeTree({});
      treeUtils.forEach(data, (node) => {
        node.id = undefined
        node.parentId = undefined
        node.createdBy = undefined
        node.createdAt = undefined
        node.updatedBy = undefined
        node.updatedAt = undefined
      })
      clipboardRef.value = JSON.stringify(data, null, 2);
      if (unref(copiedRef)) {
        createMessage.success("已保存到剪切板");
      } else {
        createMessage.success("复制失败");
      }
    } finally {
      createMessage.destroy("loading");
    }
  }

  function handleImport() {
    openImport(true, {})
  }


  function handleAddSub(record) {
    openInputForm(true, {
      record: { parentId: record.id },
      isUpdate: false,
    })
  }

  async function handleDelete(record) {
    await deleteLogType({ id: record.id }, reload)
  }
</script>
